<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的键盘事件</title>
</head>
<body>
    <input type="text" placeholder="你好啊">
</body>
<script>
    document.addEventListener('keydown',function(e){
        console.log('up:' +e.keyCode);
    })
    document.addEventListener('keypress',function(e){
        console.log('press:' +e.keyCode);
    })
    // 案例：按s定位光标至搜索框
    var ipt = document.querySelector('input')
    document.addEventListener('keyup',function(e){
        if(e.keyCode == 83){
            ipt.focus()
        }
        // console.log(e.keyCode);
    })
</script>
<!-- 
    常用的键盘事件
    onkeyup     某个按键被松开时触发 不区分大小写
    onkeydown   某个按键北按下时触发 不区分大小写
    onkeypress  某个按键按下时触发  不能识别功能键 区分大小写
    当这三个都有指令时，先去执行down，再执行press，最后执行keyup
    keyCode属性可以得到相应的ASCII码
    keydown和keypress在文本框里面的特点，先触发他们两个的事件，此时文字还没输入文本框中。
    key事件触发的时候，文字已经落入文本框中了。
 -->
</html>